<template>
	<view class="">
		<view class="zr_update"
		 v-if="status != 'none'"
		 :style="{height: systemInfo.windowHeight+'px'}">
			<view class="model">
				<view class="model-box"
				 :style="{backgroundImage: 'url('+cos+'/static/2.1/show_model_bg.png)'}">
					<image class="box_1" src="https://dskj-1309131688.cos.ap-nanjing.myqcloud.com/logo108.png" mode="aspectFill"></image>
					<text class="box_2">{{title}}</text>
					<view class="box_4">
						<text v-for="(item,index) in content_text" :key="index">{{item}}</text>
					</view>
					<text class="box_5" @click="confirm()">{{confirm_but}}</text>
				</view>
				<text @click="cancelChange" class="iconfont icon-shanchu"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			title: {
				type: String,
				default: '温馨提示'
			},
			content: {
				type: String || Array,
				default: ''
			},
			newVersion: {
				type: Object,
				default: ()=>{
					return {}
				}
			}
		},
		data() {
			return {
				systemInfo: uni.getSystemInfoSync(),
				path: '',
				progress: 0,
				onDownload: false
			}
		},
		created() {
			// console.log(this.$store.state);

		},
		computed: {
			status() {
				/**
				 * none = '不显示'
				 * login = 未登录弹框
				 * vip = 提示弹框
				 * prompt = 提示弹框
				 */
				return this.$store.state.showModel
			},
			confirm_but() {
				let confirmText
				switch (this.status){
					case 'login':
					confirmText = '立即登录'
						break;
					case 'vip':
					confirmText = '立即开通'
						break;
					default:
					confirmText = this.confirmText
						break;
				}
				return confirmText
			},
			content_text() {
				let content
				switch (this.status){
					case 'login':
					content = ['检测到您还未登录']
						break;
					case 'vip':
					content = ['您未开通VIP', '开通VIP立享更多特权！']
						break;
					default:
					if (typeof(this.content) == 'string') {
						content = [this.content]
					} else {
						content = this.content
					}
						break;
				}
				return content
			}
		},
		methods: {
			// 取消按钮
			cancelChange() {
				if (this.status == 'prompt') {
					this.$emit('cancel')
				} else {
					uni.navigateBack()
				}
				this.$store.commit('setShowModel', 'none')
			},
			// 确定按钮
			confirm() {
				switch (this.status){
					case 'login':
					uni.navigateTo({
						url: '/pages_a/login/index'
					})
						break;
					case 'vip':
					uni.navigateTo({
						url: '/pages_a/my/vip/member'
					})
						break;
					default:
					this.$emit('confirm')
						break;
				}
				this.$store.commit('setShowModel', 'none')
			}
		}
	}
</script>

<style lang="scss">
	.zr_update {
		position: fixed;
		top: 0;
		width: 750rpx;
		background-color: rgba($color: #000000, $alpha: .8);
		z-index: 11;
		display: flex;
		align-items: center;
		justify-content: center;
		.model {
			height: 740rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.model-box {
				background-repeat: no-repeat;
				background-size: 100%;
				width: 550rpx;
				height: 600rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				padding: 40rpx 0;
				.box_1 {
					height: 160rpx;
					width: 160rpx;
				}
				.box_2 {
					font-size: 32rpx;
					color: #333333;
					margin-top: 70rpx;
				}
				.box_4 {
					display: flex;
					flex-direction: column;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					margin-top: 35rpx;
				}
				.box_5 {
					width: 470rpx;
					height: 75rpx;
					background: #3F74FC;
					border-radius: 16rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: auto;
				}
			}
			.iconfont {
				width: 80rpx;
				height: 80rpx;
				color: rgba($color: #FFFFFF, $alpha: .7);
				font-size: 50rpx;
				border-radius: 40rpx;
				box-sizing: border-box;
				border: 4rpx solid rgba($color: #FFFFFF, $alpha: .7);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 60rpx;
			}
		}
	}
</style>
